<script setup lang="ts">
import YkPagination from '@yk/components/pagination/YkPagination.vue'
import { Pages } from '@typings/pages'
import { Download } from '@element-plus/icons-vue'
import YkTableColumn from '@yk/components/table-column/YkTableColumn.vue'
import { ObjectUtil } from '@utils/object-util'
import { ElTable } from 'element-plus'
import { TableUtil } from '@utils/table-util'
import { getLogListByPageAPI } from '@/api/log'
import { OperLogDTO } from '@/api/entity/log'
import { MountedCheck } from '@/utils'

defineOptions({ name: 'LogIndex' })

const mc = new MountedCheck()
onMounted(() => {
  searchHandle()
  mc.end()
})

onActivated(() => {
  if (mc.isMounted()) return
  getTableData()
})

// region TODO 查询
const searchParams = reactive({
  operName: '',
  type: '' as unknown as 0 | 1
})
function searchHandle () {
  pages.pageNum = 1
  exportParams.value = ObjectUtil.copy(searchParams)
  getTableData()
}
// endregion

// region TODO 表格数据
const pages = reactive(new Pages())
const tableData = shallowRef<OperLogDTO[]>([])
function getTableData () {
  const loading = ElLoading.service()
  getLogListByPageAPI({
    param: searchParams,
    ...pages.getParams()
  }).then((res) => {
    res.result().then((rdata) => {
      tableData.value = rdata.records
      pages.total = rdata.total
    })
  }).finally(loading.close)
}
// endregion

// region TODO 导出
const exportParams = shallowRef<typeof searchParams>()
// endregion
</script>

<template>
  <div class="layout_view d-flex" style="min-height: 100%">
    <div class="c_card-page w-100">
      <div class="c_card_header c_card-title bor-divider-b">系统日志</div>
      <!--搜索表单-->
      <el-form inline class="c_form-search mt-16" @submit.prevent="searchHandle">
        <el-form-item>
          <el-input v-model="searchParams.operName" placeholder="请输入操作人搜索" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.type" placeholder="请选择日志类型" clearable>
            <el-option label="全部日志" value="" />
            <el-option :value="0" label="操作日志" />
            <el-option :value="1" label="上下线日志" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandle">查询</el-button>
        </el-form-item>
        <el-form-item class="float-right mr-0">
          <export-file url="/log/export" :params="exportParams">
            <el-button class="c_btn--export" :icon="Download as any">导出</el-button>
          </export-file>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
        class="c_table-page w-100" stripe
        :data="tableData"
      >
        <el-table-column label="#" type="index" :index="TableUtil.indexMethod.bind(this, pages)" />
        <yk-table-column label="类型" prop="">
          <template #default="scope">
            <el-tag v-if="[4, 5].includes(scope.row.businessType)" type="success" effect="light">上下线</el-tag>
            <el-tag v-else effect="light" style="width: 56px;">操作</el-tag>
          </template>
        </yk-table-column>
        <yk-table-column label="操作人" prop="operName" />
        <yk-table-column label="操作内容" prop="message" />
        <yk-table-column label="IP" prop="operIp" />
        <yk-table-column label="操作时间" prop="createdAt" />
      </el-table>
      <!--分页-->
      <el-affix target=".c_table-page" position="bottom" :offset="0">
        <yk-pagination class="c_table-pagination-page" :pages="pages" @handle="getTableData" />
      </el-affix>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
